<template>
  <div class="container" @viewdisappear="viewdisappear">
    <navbar title="邀请好友" theme="light"></navbar>
    <div class="wrapper" :style="{height: shareImgStyle.height + 'px'}">
      <wxc-ep-slider v-if="sliderShow" :slider-id="sliderId"
                     :card-length='cardLength'
                     :containerS="{width: 750, height: shareImgStyle.height}"
                     :card-s="cardSize"
                     @wxcEpSliderCurrentIndexSelected="wxcEpSliderCurrentIndexSelected"
                     :select-index="0">
        <div v-for="(pic, index) in picList" :slot="`card${index}_${sliderId}`" :key="index">
          <image :src="pic.url" :style="{width: shareImgStyle.width + 'px', height: shareImgStyle.height + 'px'}" :ref="'pic'+index"></image>
        </div>
      </wxc-ep-slider>
    </div>
    <div class="footer">
      <div class="share-btns">
        <div class="share-btn" v-if="iosShow">
          <text class="share-btn-icon btn-wx icon activeable" to="pyq" @click="shareBtnClick">&#xe628;</text>
          <text class="share-btn-text">朋友圈</text>
        </div>
        <div class="share-btn" v-if="iosShow">
          <text class="share-btn-icon btn-wx icon activeable" to="wxhy" @click="shareBtnClick">&#xe66a;</text>
          <text class="share-btn-text">微信好友</text>
        </div>
        <div class="share-btn">
          <text class="share-btn-icon btn-img icon activeable" to="img" @click="saveImgToAlbum">&#xe61d;</text>
          <text class="share-btn-text">保存到相册</text>
        </div>
        <div class="share-btn">
          <text class="share-btn-icon btn-copy icon activeable" @click="copyKl">&#xe61f;</text>
          <text class="share-btn-text">复制邀请口令</text>
        </div>
      </div>
    </div>
    <wxc-loading :show="loadingShow" ></wxc-loading>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/buttons";

  .container {
    background-color: $body-bg;
    transition: transform .3s linear;
  }
  .wrapper {
    overflow: hidden;
    margin-top: 20px;
  }
  .slider-indicator {
    height: 40px;
    item-color: white;
    item-selected-color: #fb4748;
    item-size: 20px;
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
  }
  .share-img-wrapper {
    align-items: center;
    padding-top: 25px;
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 0;
    background-color: #FFFFFF;
    @include border-top(1, solid, #ddd);
    &-title {
      color: $color-muted;
      font-size: 28px;
    }
  }
  .share-btns {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .share-btn {
    flex: 1;
    justify-content: center;
    align-items: center;
    &-icon {
      font-size: 50px;
      color: #ffffff;
      text-align: center;
      width: 80px;
      height: 80px;
      border-radius: 80px;
      line-height: 80px;
    }
    &-text {
      color: $color;
      margin-top: 5px;
      font-size: 24px;
    }
  }
  .btn-wx {
    background-color: #1FCB28;
  }
  .btn-qq {
    background-color: #43B1E9;
  }
  .btn-img {
    background-color: #A98264;
  }
  .btn-copy {
    background-color: $brand-warning;
  }
</style>
<script>

import { WxcLoading, WxcEpSlider } from 'weex-ui'
let api = require('./include/api')
let Deferred = require('Deferred')
let urlPath = require('./include/url-path')
let modal = weex.requireModule('modal')
let clipboard = weex.requireModule('clipboard')
let weixinApi = weex.requireModule('weixinApi')
require('./include/page-xdom')
let config = require('./include/app-config')
module.exports = {
  mixins: [
    require('./mixin/page-refresh')
  ],
  components: {
    navbar: require('./components/navbar.vue'),
    WxcLoading,
    WxcEpSlider
  },
  data () {
    return {
      crownIcon: 'images/crown.png',
      bgImg: 'images/upgrade-bg.jpg?v=1',
      inviteUserNumForSuperLevel: 5,
      loadingShow: false,
      dialogShow: false,
      dialogContent: '',
      shareImg: 'images/share.jpg?v=1',
      shareText: '',
      invitationCode: '',
      iosShow: false,
      picList: [],
      sliderShow: true,
      shareImgStyle: {
        width: 700,
        height: 1244,
        backgroundColor: '#fff'
      },
      sliderId: 1,
      cardLength: 5,
      cardSize: {
        width: 400,
        height: 1300,
        spacing: 0,
        scale: 0.8
      },
      picIndex: 0
    }
  },
  created () {
    config.bindConfig(this)
    this.crownIcon = urlPath.assets(this.crownIcon)
    this.bgImg = urlPath.assets(this.bgImg)
    let shareImgHeight = weex.config.env.deviceHeight * 750 / weex.config.env.deviceWidth - 130 - 130 - 60
    this.shareImgStyle = {
      width: 1080 * shareImgHeight / 1920,
      height: shareImgHeight
    }
    this.cardSize.width = this.shareImgStyle.width
    this.cardSize.height = this.shareImgStyle.height
    Deferred.when(this.loadData()).always(() => {

    })
  },
  methods: {
    loadData () {
      return api.page.inviteUser.data().done(rs => {
        let data = rs.data
        this.invitationCode = data.invitationCode
        data.picList.forEach(pic => {
          pic.url = api.url.invitePic({
            bgImg: encodeURIComponent(pic.url),
            invitationCode: this.invitationCode || '--------'
          }) + '&_=' + new Date().getTime()
        })
        this.picList = data.picList
        this.shareImg = this.picList[0].url
        this.cardLength = this.picList.length
        let list = [
          '邀请你下载辣小客APP，先领券后购物，网购省钱不止一丁点[色]，APP里可搜索到大量天猫、淘宝、京东、拼多多大额隐藏优惠券！',
          '-----------------',
          '下载链接: http://www.mizugou.com',
          '-----------------',
          '复制这条信息•' + this.invitationCode + '•，打开辣小客，进行邀请注册，领券购物！'
        ]
        this.shareText = list.join('\n')
      })
    },
    wxcEpSliderCurrentIndexSelected (e) {
      this.picIndex = e.currentIndex
      this.shareImg = this.picList[e.currentIndex].url
    },
    onXRefresh (event) {
      this.onRefresh(event, Deferred.when(this.loadData()))
    },
    saveImgToAlbum () {
      this.$refs['pic' + this.picIndex][0].save(result => {
        if (result.success) {
          modal.toast({message: '保存成功', duration: 0.3})
        } else {
          modal.toast({message: '保存失败', duration: 0.3})
        }
      })
    },
    shareBtnClick: function (e) {
      let to = e.target.attr.to
      clipboard.setString(this.shareText)
      switch (to) {
        case 'img' :
          this.shareImgShown = true; break
        case 'pyq':
          let images = [this.shareImg]
          this.loadingShow = true
          weixinApi.sendTimeline({
            images: images,
            text: this.shareText
          }, flag => {
            this.loadingShow = false
            if (!flag) {
              modal.alert({message: '您还没有安装微信，无法分享，请先安装微信！'})
            }
          })
          break
        case 'wxhy':
          let imagesWxhy = [this.shareImg]
          this.loadingShow = true
          weixinApi.sendSession({
            images: imagesWxhy,
            text: this.shareText
          }, flag => {
            this.loadingShow = false
            if (!flag) {
              modal.alert({message: '您还没有安装微信，无法分享，请先安装微信！'})
            }
          })
          break
      }
    },
    copyKl () {
      clipboard.setString(this.shareText)
      modal.toast({message: '已为你复制邀请口令', duration: 0.5})
    },
    viewdisappear () {
      // this.sliderShow = false
    }
  }
}
</script>
